<!--
 * @Author: JohnYang
 * @Date: 2020-09-23 09:12:35
 * @LastEditors: Zhang Yingying
 * @LastEditTime: 2020-11-23 21:56:43
-->
<template>
  <div class="view">
    <div class="btn-title">
      <el-button type="danger" class="btn-normal" @click="handleCreate"
        >新增</el-button
      >
      <el-button type="warning" class="btn-normal" @click="handleBatchDel"
        >批量删除</el-button
      >
    </div>
    <el-form label-width="80px" style="margin-bottom: 20px;">
      <el-row :gutter="40">
        <el-col :span="8">
          <el-form-item label="合同编号:">
            <form-control
              type="input"
              clearable
              v-model="search.contractNumber"
              placeholder="搜索合同编号"
            ></form-control>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="姓名:">
            <form-control
              type="input"
              clearable
              v-model="search.userName"
              placeholder="搜索姓名"
            ></form-control>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="区域:">
            <form-control
              type="select"
              clearable
              :options="regions"
              v-model="search.region"
              placeholder="搜索区域"
            ></form-control>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="车架号:">
            <form-control
              type="input"
              clearable
              v-model="search.frameNum"
              placeholder="搜索车架号"
            ></form-control>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="车行名称:">
            <form-control
              type="input"
              clearable
              v-model="search.dealerName"
              placeholder="搜索车行名称"
            ></form-control>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="录入时间:">
            <form-control
              v-model="search.createTime"
              value-format="yyyy-MM-dd"
              type="daterange"
              clearable
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :style="{ width: '100%' }"
              placeholder="搜索录入时间"
            ></form-control>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <div>
            <el-button
              class="btn-normal"
              type="danger"
              size="small"
              @click="handleSearch"
              >查询</el-button
            >
            <el-button
              class="btn-normal"
              type="default"
              size="small"
              @click="handleReset"
              >重置</el-button
            >
          </div>
        </el-col>
      </el-row>
    </el-form>
    <base-table
      ref="table"
      @selection-change="handleSelectionChange"
      :config="config"
      :columns="columns"
    ></base-table>
  </div>
</template>

<script>
import { getImportList, deleteImport } from "@/api";
import CommonMixin from "@/mixins/common.js";
import { RenderMixin } from "@/mixins/render.js";
import { StorageMixin } from "@/mixins/storage.js";
import FormControl from "@/components/FormControl.vue";
import { importType, passed, reject } from "@/config";
import { mapState } from "vuex";
export default {
  name: "ImportCarView",
  mixins: [CommonMixin, RenderMixin, StorageMixin],
  methods: {
    reloadTable(back2first) {
      this.table && this.table.reload(back2first);
    },
    handleSelectionChange(selection) {
      this.selection = selection;
    },
    handleCreate() {
      this.$router.push({
        name: "ImportCarDetail"
      });
    },
    handleEdit(row) {
      this.$router.push({
        name: "ImportCarDetail",
        query: {
          id: row.id
        }
      });
    },
    handleAudit(row) {
      this.$router.push({
        name: "ImportCarDetail",
        query: {
          id: row.id,
          mode: "audit"
        }
      });
    },
    handleView(row) {
      this.$router.push({
        name: "ImportCarDetail",
        query: {
          id: row.id,
          mode: "view"
        }
      });
    },
    handleDelete(row) {
      this.$interaction.showConfirm({
        message: "确定要删除当前数据吗?",
        confirmed: () => {
          this.requestDel(row.id);
        }
      });
    },
    async requestDel(id) {
      if (!id) {
        return;
      }
      try {
        let resp = await deleteImport(id);
        if (resp && resp.code == 0) {
          this.$interaction.showSuccess("删除成功!");
          this.reloadTable(true);
        } else {
          this.$interaction.showError("删除失败!");
        }
      } catch (exp) {
        console.log(exp);
      }
    },
    handleBatchDel() {
      if (!Array.isArray(this.selection) || this.selection.length <= 0) {
        return;
      }
      this.$interaction.showConfirm({
        message: "确定要删除所选数据吗?",
        confirmed: () => {
          let ids = this.selection.map(x => x.id);
          this.requestDel(ids.join(","));
        }
      });
    },
    reshapeData(list) {
      return list.map(x => {
        return {
          ...x,
          imgs: (x.imgs || "").split(",").filter(x => x !== "")
        };
      });
    }
  },
  computed: {
    table() {
      return this.$refs.table;
    },
    ...mapState({
      admin: state => state.user.role
    })
  },
  data() {
    var _this = this;
    return {
      reject,
      passed,
      selection: [],
      config: {
        selection: true,
        getData: async ({ pageNum, pageSize }) => {
          let result = {
            data: [],
            total: 0
          };
          let resp = await getImportList({
            pageNum,
            pageSize,
            ...this.search,
            start:
              Array.isArray(this.search.createTime) &&
              this.search.createTime.length
                ? this.search.createTime[0]
                : undefined,
            end:
              Array.isArray(this.search.createTime) &&
              this.search.createTime.length
                ? this.search.createTime[1]
                : undefined
          });
          if (resp && resp.code == 0) {
            result.total = resp.data.total;
            result.data = this.reshapeData(resp.data.list);
          } else {
            this.$interaction.showError("获取数据失败!");
          }
          return result;
        }
      },
      columns: {
        contractNumber: {
          label: "合同编号",
          width: "125px",
          align: "center"
        },
        brand: {
          label: "品牌",
          width: "125px",
          align: "center",
          formatter(val) {
            return _this.renderBrand(val);
          }
        },
        vehicleModel: {
          label: "车型",
          minWidth: "150px",
          formatter(val) {
            return _this.renderVehicleModel(val);
          },
          align: "center"
        },
        region: {
          label: "区域",
          width: "100px",
          formatter(val) {
            return _this.renderRegion(val);
          },
          align: "center"
        },
        dealerName: {
          label: "车行",
          minWidth: "150px",
          align: "center"
        },
        qualityProtectPlan: {
          label: "质保方案",
          width: "100px",
          align: "center",
          formatter(val) {
            return _this.renderQualitySolution(val);
          }
        },
        frameNum: {
          label: "车架号",
          width: "120px",
          align: "center"
        },
        engineNum: {
          label: "发动机号",
          width: "120px",
          align: "center"
        },
        milesMeter: {
          label: "里程表数",
          align: "center"
        },
        productDate: {
          label: "生产日期",
          width: "130px",
          align: "center",
          formatter(val) {
            return _this.renderDate(val);
          }
        },
        billAmount: {
          label: "购车发票金额",
          width: "130px",
          align: "center"
        },
        billDate: {
          label: "购车发票日期",
          width: "130px",
          align: "center",
          formatter(val) {
            return _this.renderDate(val);
          }
        },
        applyDate: {
          label: "申请日期",
          width: "130px",
          align: "center",
          formatter(val) {
            return _this.renderDate(val);
          }
        },
        vipServiceFee: {
          label: "会员服务费",
          width: "120px",
          align: "center"
        },
        userName: {
          label: "会员姓名",
          align: "center"
        },
        telephone: {
          label: "联系电话",
          width: "130px",
          align: "center"
        },
        certificateType: {
          label: "证件类型",
          formatter(val) {
            return _this.renderCertificateType(val);
          },
          align: "center"
        },
        certificateNum: {
          label: "证件号码",
          width: "180px",
          align: "center"
        },
        certificateAddress: {
          label: "证件地址",
          width: "180px",
          align: "center"
        },
        email: {
          label: "会员邮箱",
          width: "150px",
          align: "center"
        },
        productRegion: {
          label: "产地",
          width: "100px",
          align: "center"
        },
        singleLimit: {
          label: "单次事故责任限额",
          width: "150px",
          align: "center"
        },
        totalLimit: {
          label: "累计责任限额",
          width: "150px",
          align: "center"
        },
        createTime: {
          label: "录入时间",
          align: "center",
          width: "130px",
          formatter(val) {
            return _this.renderDate(val);
          }
        },
        comment: {
          label: "备注",
          width: "200px",
          align: "center"
        },
        imgs: {
          label: "影像资料",
          width: "100px",
          align: "center",
          render(h, row) {
            var imgs = row.imgs;
            console.log(imgs);
            if (!Array.isArray(imgs) || imgs.length <= 0) {
              return <span>暂无图片</span>;
            }
            var url = imgs[0];
            return <el-image src={url} preview-src-list={imgs}></el-image>;
          }
        },
        approve: {
          label: "审核状态",
          render(h, row) {
            return (
              <el-tag type={row.approve == 0 ? "" : "danger"}>
                {_this.renderAuditState(row.approve)}
              </el-tag>
            );
          }
        },
        operation: {
          label: "操作",
          align: "center",
          width: "270px",
          render(h, row) {
            console.log(_this.admin, row.approve);
            return (
              <div>
                <el-button
                  type="danger"
                  size="mini"
                  on-click={() => {
                    _this.handleDownload({ id: row.id, type: importType });
                  }}
                >
                  下载
                </el-button>
                {_this.admin == 1 && (
                  <el-button
                    type="danger"
                    size="mini"
                    on-click={() => {
                      _this.handleEdit(row);
                    }}
                  >
                    编辑
                  </el-button>
                )}
                <el-button
                  type="danger"
                  size="mini"
                  on-click={() => {
                    row.approve == passed
                      ? _this.handleView(row)
                      : _this.admin == 1
                      ? _this.handleAudit(row)
                      : _this.handleEdit(row);
                  }}
                >
                  {row.approve == passed
                    ? "查看"
                    : _this.admin == 0
                    ? "编辑"
                    : "审批"}
                </el-button>
                <el-button
                  type="warning"
                  size="mini"
                  on-click={() => {
                    _this.handleDelete(row);
                  }}
                >
                  删除
                </el-button>
              </div>
            );
          }
        }
      }
    };
  }
};
</script>

<style lang="scss" scoped>
.btn-title {
  margin-bottom: 20px;
}
</style>
